<template lang="html">
  <div class="search_list">
    <div class="list_header">
       <ul>
        <li>堂食点餐</li>
        <li class="active">外卖点餐</li>
       </ul>
    </div>
     <div class="list_con">
      <div class="con_left">
        <ul>
          <li v-for="(value,index) in this.$store.getters.slist" v-on:click="checkFirstTab(index,value.firstlist)" :class="{active:firstActive==index}">
            <p>{{value.name}}</p>
             <ul v-show="firstActive==index">
            <!--  <li class="active">点心</li> -->
             <li v-for="(fvalue,findex) in value.firstlist" v-on:click.stop="checkTab(fvalue,fvalue.sid,value.firstlist.id)" :class="{active:isActive==fvalue}">{{fvalue.fname}}</li>
             </ul>
          </li>
        </ul>
      </div>
      <div class="con_right">
        <ul v-for="detail in detaillist">
           <p>
             <b><i class="yo-ico" v-show="detail.hot">&#xe60b;</i>{{detail.fname}}</b>
             <span>大家喜欢吃才叫真好吃</span>
           </p>
            <ul>
               <li v-for="detailcon of detail.secondlist">
                 <dl>
                   <dt><img :src="detailcon.src" alt=""></dt>
                   <dd>
                     <p>{{detailcon.sname}}</p>
                     <div class="givespan"><p v-show="detailcon.give"><span>赠</span><span>{{detailcon.give}}</span></p></div>
                     <p><span><i class="yo-ico">&#xe635;</i>{{detailcon.nprice}}</span><del>原价<i class="yo-ico">&#xe635;</i>{{detailcon.oprice}}</del></p>
                   </dd>
                   <dd v-on:click="addCar(detailcon)"><i class="yo-ico">&#xe726;</i></dd>
                 </dl>
               </li>
            </ul>
         </ul> 
      </div>
     </div>
  </div>
</template>

<script>
import header from '../components/Header.vue'
import {mapGetters} from 'vuex'

export default {
  data(){
   return {
       datalist:[], //全部内容
      detaillist:[], //分类详情
      isActive:"",
      firstActive:"",
      secondShow:false,
      id:"",
      sid:"",
      pid:""
   }
  },
   methods:{
    //点击二级导航
    checkTab(name,sid,id){
      this.isActive=name;
      this.sid=sid;
      this.id=id;
    },
    //点击一级导航
    checkFirstTab(name,value){
       this.detaillist=[];
       this.firstActive=name;
      if(value){  //如果存在子类执行显示子类 并给第一个元素添加active       
        this.secondShow=true;
        this.isActive =value[0];
      }
      this.detaillist=value
    
    
   },
   //加入购物车
   addCar(pid){
        this.$store.dispatch('addToCart',pid)
   }
  },
  computed:{
  
  },
  mounted() {
      //searchList 是action 函数名
      this.$store.dispatch('searchList')
     // this.datalist=this.$store.getters.slist  //异步获取不到值 放在dom
   
  }
  
}
</script>
